import React, { useEffect, useState } from 'react';
import styles from '../planPage/index.less';
import { Checkbox, Col, Input, Radio, Row, Select, Space, Tooltip } from 'antd';
import DealUnit from '../../components/dealUnit';
import { features, useTablePipeline } from 'ali-react-table';
import tacticDeleteLineSvg from '@/assets/InterprovincialSpotDeclaration/tactic_delete_line.svg';
import TacticPage from '../../plan/tacticPage';
import { TjTable } from '@/pages/ETrade/components';
import { MinusCircleOutlined, PlusSquareOutlined, QuestionCircleOutlined } from '#/utils/antdIcons';
import {
  ELECTRIC_ENERGY_OPTIONS,
  ELECTRIC_PRICE_OPTIONS,
  iconDisabledStyle,
  iconStyle,
  TOOLTIP_INFO,
  unitStyle,
} from '../../constant';
import { PeriodPicker } from '../../components/periodPicker';
import { PlusCircleOutlined } from '@ant-design/icons';
import {
  buildDataKey,
  buildStationObjByData,
  buildTimeFrameArrTatic3,
  changePrice,
  disabledDate,
  getHourOrder,
  getOptionsByHourOrder,
  getPercent,
  getThreeDecimal,
  getTimePointByValue,
  getTimesPoint,
  mergeStep,
  stringToArray,
  tableStyle,
  TimeFrameArr,
} from '../../helper';
import { connect } from 'umi';
import _ from 'lodash';
import DatePickerMultiple from '../../components/DatePickerMultiple';

const inputStyle = { width: 50, height: 24, fontSize: 12, padding: '3px 2px' };

const tooltipStyle = { color: 'rgba(253, 79, 67, 1)', marginLeft: 5 };

const { Option } = Select;

const Tactic3 = ({
  endOrder,
  strategyData = {},
  planData,
  index,
  activeKey,
  date,
  type,
  selectRowsObj,
  dispatch,
  disabled,
  hourOrder,
}) => {
  const [showAddBtn, setShowAddBtn] = useState(false);

  // 当限额条件电力选择为按照最大限额申报时，表格内的电力百分比默认为100%，且不可修改
  const [checkDisabled, setCheckDisabled] = useState(false);

  useEffect(() => {
    // 当限额条件电力选择为按照最大限额申报时，表格内的电力百分比默认为100%，且不可修改
    if (strategyData.electricEnergy === 1) {
      let data = _.cloneDeep(planData);
      if (type === 'intraday') {
        data[+activeKey].strategyList[index].details?.forEach((i) => {
          i?.children?.forEach((j) => {
            j?.children?.forEach((k) => {
              k.electricType = 1;
              k.electric1 = 100;
            });
          });
        });
      } else {
        data[+activeKey].strategyList[index].details?.forEach((i) => {
          i.electricType = 1;
          i.electric1 = 100;
        });
      }
      dispatch({
        type: 'interprovincialSpotDeclaration/setState',
        payload: {
          planData: data,
        },
      });
      setCheckDisabled(true);
    } else {
      setCheckDisabled(false);
    }
  }, [strategyData.electricEnergy]);

  useEffect(() => {
    if (type === 'dayahead') {
      // 日前的情况策略2表格长度不能超过96条
      const length = mergeStep(strategyData?.details || [])?.length;
      setShowAddBtn(length < 96);
    } else {
      // 日内的情况策略2表格长度不能超过8条
      const length = mergeStep(strategyData?.details || [])?.length;
      setShowAddBtn(length < 8);
    }
  }, [strategyData]);

  const changeInfoData = (v, key, rowKey) => {
    let data = _.cloneDeep(planData);
    if (type === 'intraday') {
      const indexArr = stringToArray(rowKey);
      const a = indexArr?.[0] || 0;
      const b = indexArr?.[1] || 0;
      const c = indexArr?.[2] || 0;
      data[+activeKey].strategyList[index].details[a]['children'][b]['children'][c][key] = v;
    } else {
      data[+activeKey].strategyList[index].details[rowKey][key] = v;
    }
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  const changeIntraDayOrderData = (v, key, record) => {
    let rowKey = stringToArray(record.key);
    const a = rowKey[0] || 0;
    const b = rowKey[1] || 0;
    const timePeriod = record.timePeriod.split('-');
    if (key === 'startOrder') {
      timePeriod[0] = v;
    } else {
      timePeriod[1] = v;
    }
    const arr = strategyData.details || [];
    arr[a].children[b][key] = v;
    arr[a].children[b]['timePeriod'] = timePeriod.join('-');
    let data = _.cloneDeep(planData);
    data[+activeKey].strategyList[index].details = arr;
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  const changeOrderData = (v, key, record) => {
    const team = record.team;
    const timePeriod = record.timePeriod.split('-');
    const arr = strategyData.details || [];
    arr.forEach((i) => {
      if (i.team === team) {
        if (key === 'startOrder') {
          timePeriod[0] = v;
        } else {
          timePeriod[1] = v;
        }
        i[key] = v;
        i.timePeriod = timePeriod.join('-');
      }
    });
    let data = _.cloneDeep(planData);
    data[+activeKey].strategyList[index].details = arr;
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  // 删除行，并重置key
  const deleteRow = (v) => {
    const data = _.cloneDeep(planData);
    let arr = strategyData.details || [];
    arr = arr.filter((i) => i.team !== v.team);
    data[+activeKey].strategyList[index].details = arr;
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  const changeIntraDayStep = (v, type) => {
    const data = _.cloneDeep(planData);
    const rowKey = stringToArray(v.key);
    let arr = _.cloneDeep(strategyData?.details) || [];
    const a = rowKey?.[0] || 0;
    const b = rowKey?.[1] || 0;
    const c = rowKey?.[2] || 0;
    let stepArr = arr?.[a]?.['children']?.[b]?.['children'] || [];
    // type=0是新增，type=1是删除
    if (!type) {
      if (stepArr.length < 5) {
        stepArr.push({
          level: 3,
          electricType: 1,
          // 当限额条件电力选择为按照最大限额申报时，表格内的电力百分比默认为100%，且不可修改
          electric1: strategyData.electricEnergy === 1 ? 100 : '',
        });
      }
    } else {
      if (stepArr.length > 1) {
        stepArr.splice(c, 1);
      }
    }
    stepArr = stepArr.map((i, k) => ({ ...i, step: k + 1 }));
    arr[a]['children'][b]['children'] = stepArr;
    arr = buildDataKey(arr);
    onChangeOpenKeys([]);
    data[+activeKey].strategyList[index].details = arr;
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  const changeStep = (v, type) => {
    const rowKey = v.key;
    const team = v.team;
    let arr = _.cloneDeep(strategyData?.details) || [];
    const data = _.cloneDeep(planData);
    // type=0是新增，type=1是删除
    if (!type) {
      // 如果addDisabled为true则当前阶梯段已满，不能继续新增
      if (!v.addDisabled) {
        arr.splice(rowKey + 1, 0, {
          startOrder: v.startOrder,
          endOrder: v.endOrder,
          timePeriod: v.startOrder + '-' + v.endOrder,
          electricType: 1,
          // 当限额条件电力选择为按照最大限额申报时，表格内的电力百分比默认为100%，且不可修改
          electric1: strategyData.electricEnergy === 1 ? 100 : '',
          team,
        });
      }
    } else {
      // 如果delDisabled为true则当前阶梯段只有一个，不能删除
      if (!v.delDisabled) {
        arr.splice(rowKey, 1);
      }
    }
    let step = 1;
    arr.forEach((i, k) => {
      const teams = arr.filter((b) => b.team === team);
      if (i.team === team) {
        i.delDisabled = teams.length === 1;
        i.addDisabled = teams.length === 5;
        i.step = step;
        step++;
      }
    });
    arr = buildDataKey(arr);
    data[+activeKey].strategyList[index].details = arr;
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  const addTableLineChildren = (v) => {
    const data = _.cloneDeep(planData);
    const indexArr = stringToArray(v.key);
    let arr = _.cloneDeep(strategyData?.details || []);
    const s = indexArr?.[0] || 0;
    if (arr[s]['children'].length === 8) {
      return;
    }
    const faData = arr[s];
    let start = getTimesPoint(faData.startOrder);
    let end = getTimesPoint(faData.endOrder);
    start = getTimePointByValue(start);
    end = getTimePointByValue(end - 1);
    arr[s]['children'].push({
      startOrder: start,
      endOrder: end,
      level: 2,
      timePeriod: start + '-' + end,
      children: [
        {
          level: 3,
          step: 1,
          electricType: 1,
          // 当限额条件电力选择为按照最大限额申报时，表格内的电力百分比默认为100%，且不可修改
          electric1: strategyData.electricEnergy === 1 ? 100 : '',
        },
      ],
    });
    arr = buildDataKey(arr);
    data[+activeKey].strategyList[index].details = arr;
    onChangeOpenKeys([]);
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  const deleteTableLineChildren = (v) => {
    const data = _.cloneDeep(planData);
    let arr = _.cloneDeep(strategyData?.details || []);
    const indexArr = stringToArray(v.key);
    const s = indexArr?.[0] || 0;
    const e = indexArr?.[1] || 0;
    if (arr[s]['children'].length === 1) {
      return;
    }
    arr[s]['children'].splice(e, 1);
    arr[s]['children'].forEach((i, k) => {
      i.step = k + 1;
    });
    arr = buildDataKey(arr);
    data[+activeKey].strategyList[index].details = arr;
    onChangeOpenKeys([]);
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  const getTimeQuantumEl = (record) => {
    const startTimeValue = getTimesPoint(record.startOrder);
    const endTimeValue = getTimesPoint(record.endOrder);
    const faHourOrder = getHourOrder(strategyData.details, record);
    const options = getOptionsByHourOrder(faHourOrder);
    if (record.level === 2 || !record.level) {
      return (
        <PeriodPicker
          options={options}
          type={type}
          disabled={disabled}
          list={strategyData.details || []}
          startTimeValue={startTimeValue}
          endTimeValue={endTimeValue}
          onChange={(v, key) => changeIntraDayOrderData(v, key, record)}
        />
      );
    } else if (record.level === 1) {
      return record.startOrder + '-' + record.endOrder;
    } else if (record.level === 3) {
      return record.step + '阶梯';
    }
  };

  const columns = [
    {
      code: 'team',
      name: '时间段',
      features: { autoRowSpan: true },
      align: 'center',
      width: 100,
      render: (_, record) => {
        const startTimeValue = getTimesPoint(record.startOrder);
        const endTimeValue = getTimesPoint(record.endOrder);
        return (
          <PeriodPicker
            hourOrder={hourOrder}
            type={type}
            disabled={disabled}
            list={strategyData.details || []}
            startTimeValue={startTimeValue}
            endTimeValue={endTimeValue}
            onChange={(v, key) => changeOrderData(v, key, record)}
          />
        );
      },
    },
    {
      code: 'step',
      name: '阶梯段',
      width: 50,
      align: 'center',
    },
    {
      name: '电力',
      align: 'center',
      children: [
        {
          name: (
            <>
              <span>比例</span>
              <span style={unitStyle}>(%)</span>
            </>
          ),
          code: 'proportion',
          width: 67,
          align: 'center',
          render: (_, record) => {
            const isChecked = record.electricType === 1;
            return (
              <Radio
                disabled={disabled || checkDisabled}
                checked={isChecked}
                onClick={() => {
                  changeInfoData(1, 'electricType', record.key);
                }}
              >
                <Input
                  type={'number'}
                  disabled={!isChecked || disabled || checkDisabled}
                  value={record.electric1}
                  style={inputStyle}
                  onChange={(e) => {
                    const value = getPercent(e.target.value);
                    changeInfoData(value, 'electric1', record.key);
                  }}
                />
              </Radio>
            );
          },
        },
        {
          name: (
            <>
              <span>固定值</span>
              <span style={unitStyle}>(MW)</span>
            </>
          ),
          code: 'fixedValue',
          width: 68,
          align: 'center',
          render: (_, record) => {
            const isChecked = record.electricType === 2;
            return (
              <Radio
                disabled={disabled || checkDisabled}
                checked={isChecked}
                onClick={() => {
                  changeInfoData(2, 'electricType', record.key);
                }}
              >
                <Input
                  type={'number'}
                  disabled={!isChecked || disabled}
                  value={record.electric2}
                  style={inputStyle}
                  onChange={(e) => changeInfoData(e.target.value, 'electric2', record.key)}
                />
              </Radio>
            );
          },
        },
      ],
    },
    {
      code: 'price',
      name: (
        <>
          <div>电价</div>
          <div style={unitStyle}>(元/MW)</div>
        </>
      ),
      width: 55,
      align: 'center',
      render: (v, record) => (
        <Input
          disabled={disabled}
          type={'number'}
          value={v}
          style={{ ...inputStyle, width: '100%' }}
          onChange={(e) => {
            const value = getThreeDecimal(e.target.value);
            changeInfoData(value, 'price', record.key);
          }}
        />
      ),
    },
    {
      code: 'key',
      name: '',
      width: 45,
      align: 'center',
      render: (_, v) =>
        !disabled && (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <PlusCircleOutlined
                style={v.addDisabled ? iconDisabledStyle : iconStyle}
                onClick={() => changeStep(v, 0)}
              />
              <MinusCircleOutlined
                style={v.delDisabled ? iconDisabledStyle : iconStyle}
                onClick={() => changeStep(v, 1)}
              />
            </div>
          </>
        ),
    },
    {
      code: 'team',
      name: '',
      align: 'center',
      width: 25,
      features: { autoRowSpan: true },
      render: (v, record) =>
        !disabled && (
          <img
            src={tacticDeleteLineSvg}
            alt={''}
            style={{ cursor: 'pointer' }}
            onClick={() => deleteRow(record)}
          />
        ),
    },
  ];

  const intraDayColumns = [
    {
      code: 'team',
      name: '时间段',
      features: { autoRowSpan: true },
      align: 'center',
      width: 100,
      render: (_, record) => getTimeQuantumEl(record),
    },
    {
      name: '电力',
      align: 'center',
      children: [
        {
          name: (
            <>
              <span>比例</span>
              <span style={unitStyle}>(%)</span>
            </>
          ),
          code: 'proportion',
          width: 67,
          align: 'center',
          render: (_, record) => {
            const isChecked = record.electricType === 1;
            return (
              (!record.level || record.level === 3) && (
                <Radio
                  disabled={disabled || checkDisabled}
                  checked={isChecked}
                  onClick={() => {
                    changeInfoData(1, 'electricType', record.key);
                  }}
                >
                  <Input
                    type={'number'}
                    disabled={!isChecked || disabled || checkDisabled}
                    value={record.electric1}
                    style={inputStyle}
                    onChange={(e) => {
                      const value = getPercent(e.target.value);
                      changeInfoData(value, 'electric1', record.key);
                    }}
                  />
                </Radio>
              )
            );
          },
        },
        {
          name: (
            <>
              <span>固定值</span>
              <span style={unitStyle}>(MW)</span>
            </>
          ),
          code: 'fixedValue',
          width: 68,
          align: 'center',
          render: (_, record) => {
            const isChecked = record.electricType === 2;
            return (
              (!record.level || record.level === 3) && (
                <Radio
                  disabled={disabled || checkDisabled}
                  checked={isChecked}
                  onClick={() => {
                    changeInfoData(2, 'electricType', record.key);
                  }}
                >
                  <Input
                    type={'number'}
                    disabled={!isChecked || disabled}
                    value={record.electric2}
                    style={inputStyle}
                    onChange={(e) => changeInfoData(e.target.value, 'electric2', record.key)}
                  />
                </Radio>
              )
            );
          },
        },
      ],
    },
    {
      code: 'price',
      name: (
        <>
          <div>电价</div>
          <div style={unitStyle}>(元/MW)</div>
        </>
      ),
      width: 55,
      align: 'center',
      render: (v, record) =>
        (!record.level || record.level === 3) && (
          <Input
            disabled={disabled}
            type={'number'}
            value={v}
            style={{ ...inputStyle, width: '100%' }}
            onChange={(e) => {
              const value = getThreeDecimal(e.target.value);
              changeInfoData(value, 'price', record.key);
            }}
          />
        ),
    },
    {
      code: 'key',
      name: '操作',
      width: 60,
      align: 'center',
      render: (_, v) => {
        if (disabled || v.level === 1) {
          return <></>;
        } else if (v.level === 3) {
          return (
            <Space>
              <PlusCircleOutlined
                style={v.addDisabled ? iconDisabledStyle : iconStyle}
                onClick={() => changeIntraDayStep(v, 0)}
              />
              <MinusCircleOutlined
                style={v.delDisabled ? iconDisabledStyle : iconStyle}
                onClick={() => changeIntraDayStep(v, 1)}
              />
            </Space>
          );
        } else if (v.level === 2) {
          return (
            <Space>
              <a onClick={() => addTableLineChildren(v)}>新增</a>
              <a
                style={{ color: 'rgba(255, 92, 92, 1)' }}
                onClick={() => deleteTableLineChildren(v)}
              >
                删除
              </a>
            </Space>
          );
        }
      },
    },
  ];

  const addTableLine = () => {
    const data = _.cloneDeep(planData);
    const arr = data?.[+activeKey]?.strategyList?.[index]?.details || [];
    const key = arr.length;
    let team = 1;
    if (arr.length !== 0) {
      team = arr[key - 1]['team'] + 1;
    }
    const obj = {
      timePeriod: `0015-2400`,
      electricType: 1,
      // 当限额条件电力选择为按照最大限额申报时，表格内的电力百分比默认为100%，且不可修改
      electric1: strategyData.electricEnergy === 1 ? 100 : '',
      electric2: '',
      price: '',
      key,
      step: 1,
      startOrder: '0015',
      endOrder: '2400',
      team,
    };
    if (type === 'intraday' && arr.length === 0) {
      const startOrder = hourOrder?.split('-')?.[0] || '';
      obj.timePeriod = `${startOrder}-${startOrder}`;
      obj.startOrder = startOrder;
      obj.endOrder = startOrder;
    }
    arr.push(obj);
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  const changeMarkDate = (v) => {
    const markDate = v.toString();
    let data = _.cloneDeep(planData);
    data[+activeKey].strategyList[index].markDate = markDate;
    const stationObj = buildStationObjByData(data);
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
        stationObj,
      },
    });
  };

  const changePlanData = (data) => {
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  const changeElectricEnergy = (v) => {
    let data = _.cloneDeep(planData);
    data[+activeKey].strategyList[index].electricEnergy = v;
    changePlanData(data);
  };

  const changeElectricPriceType = (v) => {
    let data = _.cloneDeep(planData);
    data[+activeKey].strategyList[index].electricPriceType = v;
    changePlanData(data);
  };

  const onChangeOpenKeys = (v) => {
    let selectArr = v;
    if (selectArr.toString() === 'root') {
      selectArr = strategyData?.details?.map((i) => i.key) || [];
    }
    const obj = _.cloneDeep(selectRowsObj);
    obj[index] = selectArr;
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        selectRowsObj: obj,
      },
    });
  };

  const pipeline = useTablePipeline({ components: { Checkbox } })
    .input({ dataSource: strategyData.details || [], columns })
    .primaryKey('key')
    .use(
      features.multiSelect({
        value: selectRowsObj[index] || [],
        onChange: onChangeOpenKeys,
      }),
    )
    .use(features.autoRowSpan());

  const disablePipeline = useTablePipeline({ components: {} })
    .input({ dataSource: strategyData.details || [], columns })
    .primaryKey('key')
    .use(features.autoRowSpan());

  const treePipeline = useTablePipeline({ components: { Checkbox } })
    .input({ dataSource: strategyData.details || [], columns: intraDayColumns })
    .primaryKey('key')
    .use(
      features.treeMode({
        defaultOpenKeys: [0, '0-0'],
      }),
    )
    .use(
      features.treeSelect({
        tree: strategyData.details || [],
        checkboxPlacement: 'start',
        rootKey: 'root',
        onChange: onChangeOpenKeys,
        value: selectRowsObj[index] || [],
        clickArea: 'cell',
        checkboxColumn: { lock: true },
        highlightRowWhenSelected: true,
      }),
    );

  const treeDisablePipeline = useTablePipeline({ components: {} })
    .input({ dataSource: strategyData.details || [], columns: intraDayColumns })
    .primaryKey('key')
    .use(
      features.treeMode({
        defaultOpenKeys: [0],
      }),
    );

  const changeElectricPrice = (e) => {
    const value = getThreeDecimal(e.target.value);
    let data = _.cloneDeep(planData);
    data[+activeKey].strategyList[index].electricPrice = value;
    data[+activeKey].strategyList[index].details = changePrice(strategyData.details, value);
    changePlanData(data);
  };

  const changeTimeFrame = (v) => {
    const details = strategyData?.details || [];
    let arr = [];
    let timeFrame = buildTimeFrameArrTatic3(v, strategyData);
    timeFrame.forEach((i) => {
      if (details.some((a) => a.timePeriod === i.timePeriod)) {
        const value = details.filter((f) => f.timePeriod === i.timePeriod)?.[0];
        arr.push(value);
      } else {
        arr.push(i);
      }
    });
    arr = buildDataKey(arr);
    let data = _.cloneDeep(planData);
    data[+activeKey].strategyList[index]['hourOrderList'] = v;
    data[+activeKey].strategyList[index].details = arr;
    onChangeOpenKeys([]);
    changePlanData(data);
  };

  return (
    <TacticPage title={strategyData.strategyName} index={index} disabled={disabled}>
      {type !== 'intraday' ? (
        <div className={styles.tactic_line_margin}>
          <div className={styles.tactic_line_title_box}>
            <div className={styles.tactic_line_title}>标的日</div>
            <div className={styles.tactic_line_title}>*可多选</div>
          </div>
          <DatePickerMultiple
            disabled={disabled}
            value={strategyData.markDate ? strategyData.markDate.split(',') : []}
            disabledDate={(current) => disabledDate(current, endOrder)}
            onChange={changeMarkDate}
          />
        </div>
      ) : (
        <div className={styles.tactic_line_margin}>
          <div className={styles.tactic_line_title}>时段</div>
          <Checkbox.Group
            className={styles.tactic_line_checkbox}
            onChange={changeTimeFrame}
            value={strategyData?.hourOrderList || []}
          >
            <Row>
              {TimeFrameArr.map((i) => (
                <Col span={4} key={i.value}>
                  <Checkbox disabled={disabled} value={i.value} key={i.value}>
                    {i.label}
                  </Checkbox>
                </Col>
              ))}
            </Row>
          </Checkbox.Group>
        </div>
      )}
      <div className={styles.tactic_line_margin}>
        <div className={styles.tactic_line_title}>交易单元</div>
        <DealUnit index={index} strategyData={strategyData} disabled={disabled} />
      </div>
      <div className={styles.table}>
        <div className={styles.tactic_line_margin}>
          <div className={styles.tactic_line_title}>
            限额条件
            <Tooltip title={TOOLTIP_INFO}>
              <QuestionCircleOutlined style={tooltipStyle} />
            </Tooltip>
          </div>
          <Space direction="vertical">
            <div className={styles.tactic_line_radio}>
              <div className={styles.tactic_line_radio_label}>电力</div>
              <Select
                disabled={disabled}
                style={{ width: '100%' }}
                placeholder={'请选择'}
                onChange={changeElectricEnergy}
                value={strategyData.electricEnergy}
              >
                {ELECTRIC_ENERGY_OPTIONS.map((i) => (
                  <Option key={i.value} value={i.value}>
                    {i.label}
                  </Option>
                ))}
              </Select>
            </div>
            <div className={styles.tactic_line_radio}>
              <div className={styles.tactic_line_radio_label}>电价</div>
              <Select
                disabled={disabled}
                style={{ width: '78%', marginRight: '2%' }}
                placeholder={'请选择'}
                value={strategyData.electricPriceType}
                onChange={changeElectricPriceType}
              >
                {ELECTRIC_PRICE_OPTIONS.map((i) => (
                  <Option key={i.value} value={i.value}>
                    {i.label}
                  </Option>
                ))}
              </Select>
              <Input
                style={{ width: '20%' }}
                disabled={disabled || strategyData.electricPriceType !== 3}
                value={strategyData.electricPrice}
                type={'number'}
                onChange={changeElectricPrice}
              />
            </div>
          </Space>
        </div>
        <div className={styles.table_box}>
          {type !== 'intraday' ? (
            <>
              <TjTable
                style={tableStyle}
                useOuterBorder={true}
                stickyScrollHeight={10}
                useVirtual={{ horizontal: true, vertical: true, header: false }}
                defaultColumnWidth={100}
                {...(disabled ? { ...disablePipeline.getProps() } : { ...pipeline.getProps() })}
              />
              {showAddBtn && !disabled && (
                <div className={styles.tactic_line_add} onClick={addTableLine}>
                  <PlusSquareOutlined style={{ marginRight: 5 }} />
                  新增
                </div>
              )}
            </>
          ) : (
            <TjTable
              style={tableStyle}
              useOuterBorder={true}
              stickyScrollHeight={10}
              useVirtual={{ horizontal: true, vertical: true, header: false }}
              defaultColumnWidth={100}
              {...(disabled
                ? { ...treeDisablePipeline.getProps() }
                : { ...treePipeline.getProps() })}
            />
          )}
        </div>
      </div>
    </TacticPage>
  );
};

export default connect(({ global, interprovincialSpotDeclaration }) => ({
  endOrder: interprovincialSpotDeclaration.endOrder,
  planData: interprovincialSpotDeclaration.planData,
  activeKey: interprovincialSpotDeclaration.activeKey,
  date: interprovincialSpotDeclaration.date,
  type: interprovincialSpotDeclaration.type,
  selectRowsObj: interprovincialSpotDeclaration.selectRowsObj,
  hourOrder: interprovincialSpotDeclaration.hourOrder,
}))(Tactic3);
